import { RouteRecordRaw } from "vue-router";
import AppLayout from "../layout/index.vue"
import ViewLayout from "../layout/default.vue"

export const layoutRouter: RouteRecordRaw = {
  path: '/',
  name: "AppLayout",
  redirect: '/home',
  component: AppLayout,
}
export const NotFoundRouter: RouteRecordRaw = {
  path: '/:pathMatch(.*)*',
  name: "NotFound",
  redirect: '/error'
}
export const baseRouters: RouteRecordRaw[] = [
  layoutRouter,
  {
    path: '/login',
    name: "Login",
    component: () => import('@/views/login.vue')
  },{
    path: '/error',
    name: "Error",
    component: () => import('@/views/errorPage.vue')  
  }
]

export const asyncRouters: RouteRecordRaw[] = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {id: 'home', title: '首页'}
  },{
    path: '/user',
    name: 'User',
    component: () => import('@/views/User.vue'),
    meta: {id: 'user', title: '用户', icon: 'UserOutlined'}
  },{
    path: '/carousel',
    redirect: '/carousel/3d',
    name: 'Carousel',
    meta: {id: 'carousel', title: '轮播图', icon: 'CodeOutlined'},
    component: ViewLayout,
    children: [
      {
        path: '/carousel/3d',
        name: 'Carousel3d',
        component: () => import('@/views/Carousel/Carousel3d.vue'),
        meta: {id: 'carousel3d', title: '3D'}
      },{
        path: '/carousel/2d',
        name: 'Carousel2d',
        component: () => import('@/views/Carousel/Carousel2d.vue'),
        meta: {id: 'carousel2d', title: '2D'}
      }
    ]
  },{
    path: '/tabs',
    name: 'Tabs',
    component: () => import('@/views/Tabs.vue'),
    meta: {id: 'tabs', title: 'Tabs', icon: 'UserOutlined'}
  }
]